
<template>
  <ex_super_dialog_form ref="reportDialog" v-bind="report_dialog" v-on="$listeners" @afterSubmitSuccess="submit">
  </ex_super_dialog_form>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      readonly:false,
      report_dialog: {
        customClass: "dialog_auto",
        submitDataHandle: (data) => {
          return data;
        },
        form: {
          itemClass: "form_item_default",
          inputClass: "form_input_default",
          formClass: "form_default_col2 flex_row_wrap",
          default: {},
          model: [
            // {
            //   key: "agentId",
            //   label: "label_tms_receipt_task_number",
            //   render: (h, { data }) => h('span', {}, data.agentId)
            // },
            {
              key: "customerName",
              label: "label_customer_name",
              render: (h, { data }) => h('span', {}, data.customerName)
            },
            {
              key: "totalBoxCount",
              label: "label_total_box_count",
              render: (h, { data }) => h('span', {}, data.totalBoxCount)
            },
            {
              key: "totalQuantity",
              label: "label_total_sku_count",
              render: (h, { data }) => h('span', {}, data.totalQuantity)
            },
            {
              key: "totalVolume",
              label: "label_volume",
              render: (h, { data }) => h('span', {}, data.totalVolume)
            },
            {
              key: "totalWeight",
              label: "label_tms_track_weight",
              render: (h, { data }) => h('span', {}, data.totalWeight)
            },
            {
              key: "orderCode",
              label: "label_tms_receipt_order_platform_number",
              render: (h, { data }) => h('span', {}, data.orderCode)
            },
            // {
            //   key: "agentId",
            //   label: "label_tms_track_task_number",
            //   render: (h, { data }) => h('span', {}, data.agentId)
            // },
            {
              if:()=> !this.readonly,
              key: "receiptImageUrl",
              label: "label_photo_attachment",
              type: "upload-file",
              attrs: { limit: 1 },
              render: (h, { data }) => {
                return h("ex-upload-file", {
                  props: {
                    limit:1,
                    value: data.receiptImageUrl,
                  },
                  on: {
                    input: (list) => {
                      this.$set(
                        data,
                        "receiptImageUrl",
                        list
                      );
                    },
                  },
                });
              },
            },
            {
              if:()=> this.readonly,
              label: "label_photo_attachment",
              itemClass: "",
              render: (h, { data }) => {
                // <ex_image_view class="page_table_image" :src="item" lazy fit="fill" :preview-src-list="form" />

                // return h("div",
                //   arr.map(item=>{
                //       return h("el-image", {props:{src:item,fit:'contain',previewSrcList:arr},style:{width:'100px',height:'100px',marginRight:'10px',marginBottom:'10px'}})
                //   }),
                // );
                 return h(
                  data.receiptImageUrl?'ex_image_view':'',
                  {
                    props:{
                      src:data.receiptImageUrl,
                      fit:'contain',
                      previewSrcList:[data.receiptImageUrl]
                    },
                    style:{width:'100px',height:'100px'}
                  },
                )

              }
            },
          ],
          rules: {
            receiptImageUrl: {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
          },
        },
      },

    }
  },

  methods: {
    async show(obj,readonly=false) {
      this.readonly = readonly

      if(this.readonly ){
        obj.receiptImageUrl = await this.receiptView(obj)
      }else{
        obj.receiptImageUrl = []
      }
      const option = Object.assign(
        {
          title: readonly?this.$t("label_tms_receipt_receipt_view"):this.$t("label_tms_receipt_receipt_upload"),
        },

        {
          data: obj,
          onlySetData: true,
          submitCall:(data,formData,submitCallResult)=>{
            submitCallResult(true,true,false)
          },
        }
      );
      this["$refs"]["reportDialog"].showNew(option);
    },
    receiptView(obj){
     return new Promise((resolve, reject) => {
      this.$ajax({
          url: "/tms-api/task/TmsOrderReceiptInfoRpc/receiptView.json",
          method: 'post',
          // type: 'json',
          data: {
            receiptId:obj.id
          },
          success: ({data}) => {
            resolve(data)
          }
        })
      })
    },
    submit(data) {
      if(this.readonly){

      }else{
        const receiptImageUrl = []
        data.receiptImageUrl.forEach(item=>{
          receiptImageUrl.push(item.filePath)
        })
        this.$ajax({
          url: "/tms-api/task/TmsOrderReceiptInfoRpc/uploadReceiptInfo.json",
          method: 'post',
          type: 'json',
          data: {
            id:data.id,
            receiptImageUrl:receiptImageUrl.join()
          },
          success: (res) => {
            this.$message.success(this.$t('label_receipt_tip_submit_upload'))
            this.$emit('submitSuccess')
          }
        })
      }


    }
  }
}
</script>
